<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="css/menu1.css" />
    <title>实现菜单的收缩与扩张</title>
</head>
<body>
    <h3>189000526-谭静</h3>
    <div id="leftNav" class="left-nav">
        <div id="myMenu" class="menuBox">
            <ul class="spMenuBox">
                <li class="spMenuItem" id="t" >
                    <div class="spMenu"   onclick="hiden('a','t','tt')">
                        <i class="fa fa-folder" id="tt"></i>
                        <span>菜单1</span>
                        <i class="fa fa-2x fa-angle-down" ></i>
                    </div>
                    <ul class="subMenuBox" id="a" style="display: none;">
                        <li><span class="subMenu">菜单1.1</span></li>
                        <li><span class="subMenu">菜单1.2</span></li>
                        <li><span class="subMenu">菜单1.3</span></li>
                    </ul>
                </li>
                <li class="spMenuItem" id="t1">
                    <div class="spMenu"  onclick="hiden('b','t1','t11')">
                        <i class="fa fa-folder" id="t11"></i>
                        <span>菜单2</span>
                        <i class="fa fa-2x fa-angle-down"></i>
                    </div>
                    <ul class="subMenuBox"  id="b" style="display: none;">
                        <li><span class="subMenu">菜单2.1</span></li>
                        <li><span class="subMenu">菜单2.2</span></li>
                        <li><span class="subMenu">菜单2.3</span></li>
                        <li><span class="subMenu">菜单2.1</span></li>
                        <li><span class="subMenu">菜单2.2</span></li>
                        <li><span class="subMenu">菜单2.3</span></li>
                    </ul>
                </li>
                <li class="spMenuItem" id="t2" >
                    <div class="spMenu"  onclick="hiden('c','t2','t22')">
                        <i class="fa fa-folder" id="t22"></i>
                        <span>菜单3</span>
                        <i class="fa fa-2x fa-angle-down"></i>
                    </div>
                    <ul class="subMenuBox" id="c" style="display: none;">
                        <li><span class="subMenu">菜单3.1</span></li>
                        <li><span class="subMenu">菜单3.2</span></li>
                        <li><span class="subMenu">菜单3.3</span></li>
                        <li><span class="subMenu">菜单3.1</span></li>
                        <li><span class="subMenu">菜单3.2</span></li>
                        <li><span class="subMenu">菜单3.3</span></li>
                        <li><span class="subMenu">菜单3.1</span></li>
                        <li><span class="subMenu">菜单3.2</span></li>
                        <li><span class="subMenu">菜单3.3</span></li>
                    </ul>
                </li>
                <li class="spMenuItem" id="t3">
                    <div class="spMenu" onclick="hiden('d','t3','t33')">
                        <i class="fa fa-folder" id="t33"></i>
                        <span>菜单4</span>
                        <i class="fa fa-2x fa-angle-down"></i>
                    </div>
                    <ul class="subMenuBox" id="d"  style="display: none;">
                        <li><span class="subMenu">菜单4.1</span></li>
                        <li><span class="subMenu">菜单4.2</span></li>
                        <li><span class="subMenu">菜单4.3</span></li>
                    </ul>
                </li>
                <li class="spMenuItem" id="t4">
                    <div class="spMenu"  onclick="hiden('e','t4','t44')">
                        <i class="fa fa-folder" id="t44"></i>
                        <span>菜单5</span>
                        <i class="fa fa-2x fa-angle-down"></i>
                    </div>
                    <ul class="subMenuBox" id="e" style="display: none;">
                        <li><span class="subMenu">菜单5.1</span></li>
                        <li><span class="subMenu">菜单5.2</span></li>
                        <li><span class="subMenu">菜单5.3</span></li>
                        <li><span class="subMenu">菜单5.1</span></li>
                        <li><span class="subMenu">菜单5.2</span></li>
                        <li><span class="subMenu">菜单5.3</span></li>
                    </ul>
                </li>
            </ul>
        </div>
    
    </div>
    
<script>
    function hiden(param,param1,param2){
                        // let item = document.getElementsByClassName("spMenuItem");
                        // let menu1 = document.getElementsByClassName("subMenuBox");
                        // let file = document.getElementsByClassName("fa");

                        let item = document.getElementById(param1);
                        let menu1 = document.getElementById(param);
                        let file = document.getElementById(param2);
                        if(menu1.style.display == "block"){//判断二级菜单的是否显示，是单击时则隐藏，否则显示
                            menu1.style.display = "none";
                            file.className = "fa fa-folder";
                            item.className = "spMenuItem";
                        }else{
                            menu1.style.display = "block";
                            file.className = "fa fa-folder-open";
                            item.className = "spMenuItem active";
                        }
                    }
</script>
    
</body>
</html>